import 'scss/base.scss';
import 'scss/appmate/the-spring-flower.scss';

import urlTool from 'ox-util/url.js';
import vgate from 'utility/vgate.js';
import user from 'utility/user.js';
import hostGate from 'utility/hostgate.js';
import setTitle from 'utility/settitle.js';

import {useState, useCallback, useEffect, Fragment, useRef} from 'react';
import {PageSpinner} from 'component/spinner.js';
import DrawerOverlay from 'component/draweroverlay.js';
import CenterOverlay from 'component/centeroverlay.js';

const searchParam = urlTool.param(location.search);
const headurl = '//vr1.6rooms.com/tao/i/';

function isPC() {
    return searchParam.platform == 'pc';
}
var DetailPage = function ({pageID, clickUser}) {
    var [showRule, setShowRule] = useState(0);
    var [upgradeInfo, setUpgradeInfo] = useState(null);
    var openRule = useCallback(() => {
        setShowRule(1);
    }, []);

    var closeRule = useCallback(() => {
        setShowRule(0);
        setTitle('');
    }, []);
    var getUpgradeInfo = useCallback(() => {
        return vgate('event/2022/activity/index.php', {
            _format: 1,
            encpass: user.isLogin() ? user.ticket : ''
        }).then(
            (data) => {
                if (data.flag === '001') {
                    setUpgradeInfo(data.content);
                }
            },
            (err) => {
                hostGate.toast({msg: err.toString()});
            }
        );
    }, []);

    useEffect(() => {
        getUpgradeInfo();
    }, []);

    if (!upgradeInfo) {
        return <PageSpinner />;
    }

    var userList = upgradeInfo.userInfo;
    return (
        <DrawerOverlay
            className={'detail-overlay' + (isPC() ? ' detail-overlay-pc' : '')}
            transition={false}
            onClose={hostGate.close}>
            <TopContent />
            <MidContent userList={userList} />
            <div className="signup">
                {upgradeInfo.state == 0 ? (
                    <img
                        onClick={openRule}
                        src="//vr1.6rooms.com/tao/i/q4/43bf2082b76c7e177a420aada8b7db23.png"
                    />
                ) : (
                    <img
                        onClick={openRule}
                        src="//vr1.6rooms.com/tao/i/g6/0ecd9d72dab1a423f806d98b91d58350.png"
                    />
                )}
            </div>
            <FootContent />
            {showRule ? <RulePage onClose={closeRule} /> : ''}
        </DrawerOverlay>
    );
};

var TopContent = function () {
    return (
        <div className="topcontent">
            <div className="titile">5月10日开始 每晚20点</div>
        </div>
    );
};

var ItemInfo = function ({
    picuser,
    alias,
    liveTm,
    rid,
    desc,
    talentName,
    uid,
    isLive,
    isFollow
}) {
    function formatDate(date) {
        var date = new Date(date * 1000);
        var YY = date.getFullYear() + '-';
        var MM =
            (date.getMonth() + 1 < 10
                ? '0' + (date.getMonth() + 1)
                : date.getMonth() + 1) + '-';
        var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return YY + MM + DD;
    }
    var addFollow = useCallback((event) => {
        var target = event.currentTarget;
        var uid = target.dataset.uid;
        vgate('message-follow_add.php', {
            tuid: uid
        }).then((data) => {
            if (data.flag == '001') {
                // setImPop(true);
                hostGate.toast('关注成功');
            } else {
                hostGate.toast(data.content);
            }
        });
    }, []);
    return (
        <div className="info">
            <div className="flowername">{talentName}</div>
            <div className="avatar">
                <img src={picuser} />
                {isLive == 1 ? <i></i> : ''}
                <span>{alias}</span>
            </div>
            <div className="main">
                <div className="time">{formatDate(liveTm)}</div>
                <div className="room">
                    房间号：<span>{rid}</span>
                </div>
                <div className="introduce">
                    节目简介：<span>{desc}</span>
                </div>
            </div>
            {isFollow == 0 ? (
                <div className="focus" data-uid={uid} onClick={addFollow}>
                    + 关注
                </div>
            ) : (
                <div className="focus" data-uid={uid} onClick={addFollow}>
                    取消关注
                </div>
            )}
        </div>
    );
};

var MidContent = function ({userList}) {
    return (
        <div className="midcontent">
            <i></i>
            {userList.length > 0 ? (
                userList.map((item, index) => {
                    return (
                        <ItemInfo
                            picuser={item.picuser}
                            alias={item.alias}
                            liveTm={item.liveTm}
                            rid={item.rid}
                            desc={item.desc}
                            talentName={item.talentName}
                            uid={item.uid}
                            isLive={item.isLive}
                            isFollow={item.isFollow}
                            key={index}
                        />
                    );
                })
            ) : (
                <div className="info">
                    <div className="avatar">
                        <div className="emptyimg"></div>
                        <span></span>
                    </div>
                    <div className="main">
                        <div className="time">5月6日晚 20-22点</div>
                        <div className="room">虚伪以待</div>
                    </div>
                </div>
            )}
        </div>
    );
};

var FootContent = function () {
    var gift_url = headurl + 'l6/9296dae074d58cabfc33c92105472833.png';
    var pic1 = headurl + 'o2/a77d61bd6c4143eb766fd78fc0634519.png';
    var pic2 = headurl + 'j6/8712107ff97553991e7fd9567246d164.png';
    var pic3 = headurl + 'j3/850eb6e1aed9df8b3d7455da5b5b5ada.png';
    var pic4 = headurl + 'n1/99a953eea9c02bba3581fcc5fc8f16c0.png';
    return (
        <div className="footcontent">
            <i></i>
            <div className="award">
                <div>
                    <img src={pic1} />
                    <span>节目期间精选</span>
                    <span> 才艺录制短视频</span>
                </div>
                <div>
                    <img src={pic2} />
                    <span>节目期间</span>
                    <span>热门奖励</span>
                </div>
                <div>
                    <img src={pic3} />
                    <span>海报边框*5天</span>
                </div>
                <div>
                    <img src={pic4} />
                    <span>海报标签*5天</span>
                </div>
            </div>
            <div className="explain">
                1.说明示例文字说明示例文字说明示例文字说明示
                例文字说明示例文字说明示例文字说明示例文字说 明示例文字
                2.说明示例文字说明示例文字说明示例文字说明示 例文字说明示例文字
            </div>
        </div>
    );
};

var RulePage = function ({onClose}) {
    var liveTmRef = useRef(null);
    var talentNameRef = useRef(null);
    var descRef = useRef(null);
    var onChangeDate = useCallback((event) => {
        var obj = {
            liveTm: Math.round(
                new Date(liveTmRef.current.value).getTime() / 1000
            ).toString(),
            talentName: talentNameRef.current.value,
            desc: descRef.current.value
        };
        console.log(obj);
        if (!obj.liveTm) {
            hostGate.toast({msg:'请填写期望直播日期'});
            return;
        }
        if (!obj.talentName) {
            hostGate.toast({msg:'请填写直播才艺'});
            return;
        }
        if (!obj.liveTm) {
            hostGate.toast({msg:'请填写一朵花名'});
            return;
        }

        return vgate(
            'event/2022/activity/apply.php',
            {
                type: 1,
                encpass: user.isLogin() ? user.ticket : '',
                liveTm: obj.liveTm,
                talentName: obj.talentName,
                desc: obj.desc
            },
            'POST'
        ).then(
            (data) => {
                if (data.flag === '001') {
                    setUpgradeInfo(data.content);
                }
            },
            (err) => {
                hostGate.toast({msg: err.toString()});
            }
        );
    }, []);
    return (
        <CenterOverlay className="form-page" onClose={onClose}>
            <div className="form-body">
                <div className="form-main">
                    <div className="form-items">
                        <label className="lineheight87">期望直播日期</label>{' '}
                        <input
                            ref={liveTmRef}
                            type="date"
                            placeholder="请选择日期"
                        />
                    </div>
                    <div className="form-items">
                        <label className="lineheight87">直播才艺</label>
                        <input
                            type="text"
                            ref={talentNameRef}
                            placeholder="请输入才艺介绍"
                        />
                    </div>
                    <div className="form-items">
                        <label>用一朵花名形容自己</label>{' '}
                        <input
                            type="text"
                            ref={descRef}
                            placeholder="请输入花名"
                        />
                    </div>
                    <button onClick={onChangeDate}>确认无误并报名</button>
                </div>
            </div>
        </CenterOverlay>
    );
};

export default function TheSpringFlower() {
    return <DetailPage />;
}
